<template>
  <div class="register" :style="{'background': bgImg}">
    <div class="content">
      <el-form
        ref="registFormRef"
        :model="registForm"
        :rules="rules"
        size="large"
      >
        <el-form-item label="" prop="userName">
          <el-input
            v-model="registForm.userName"
            placeholder="昵称"
            :prefix-icon="User"
            clearable
          />
        </el-form-item>
        <el-form-item label="" prop="account">
          <el-input
            v-model="registForm.account"
            placeholder="账号"
            :prefix-icon="User"
            clearable
          />
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input
            type="password"
            v-model="registForm.password"
            placeholder="密码"
            :prefix-icon="Lock"
            clearable
          />
        </el-form-item>
        <el-form-item label="" prop="rePassword">
          <el-input
            type="password"
            v-model="registForm.rePassword"
            placeholder="确认密码"
            :prefix-icon="Lock"
            clearable
          />
        </el-form-item>
        <el-form-item label="" prop="captchaAnswer">
          <el-input
            v-model="registForm.captchaAnswer"
            placeholder="验证码"
            :prefix-icon="Grape"
            class="captcha"
            clearable
          />
          <img src="https://pic.imgdb.cn/item/63cfe987588a5d166ce1b2ba.jpg" alt="">
        </el-form-item>
        <el-button type="success" @click="submitRegister">提交注册</el-button>
        <el-button type="primary" @click="goLogin">返回登陆页面</el-button>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "@vue/reactivity";
import { Lock, User, Grape } from '@element-plus/icons-vue'
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { error } from "console";
import { useRouter } from "vue-router";
import { register } from "../request/user";
const router = useRouter()
const bgImg = ref<string>('')
const registFormRef = ref<FormInstance>()
const registForm = reactive({
  userName: '',
  account: '',
  password: '',
  rePassword: '',
  captchaAnswer: '',
})
const rules = reactive<FormRules>({
  userName: [
    {
      required: true,
      message: "请输入昵称",
      trigger: 'change',
    },
    { min: 3, max: 10, message: '长度应在3到10字符之间', trigger: 'change' },
  ],
  account: [
    {
      required: true,
      message: "请输入账号",
      trigger: 'change',
    },
    { min: 3, max: 20, message: '长度应在3到20字符之间', trigger: 'change' },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: 'change',
    },
    { min: 6, max: 20, message: '长度应在6到20字符之间', trigger: 'change' },
  ],
  rePassword: [
    {
      required: true,
      message: "请输入确认密码",
      trigger: 'change',
    },
    { min: 6, max: 20, message: '长度应在6到20字符之间', trigger: 'change' },
  ],
  captchaAnswer: [
    {
      required: true,
      message: "请输入验证码",
      trigger: 'change',
    }
  ]
})
function submitRegister(){
  registFormRef.value?.validate((isValid, errors) => {
    if(isValid){
      if(registForm.password != registForm.rePassword){
        ElMessage({
          type: 'error',
          message: '密码和确认密码不一致！！'
        })
      }
      else{
        register(registForm.account, registForm.password, registForm.userName).then(
          value => {
            if(!value.data.account){
              ElMessage({
                type: 'error',
                message: '该账号已存在'
              })
            }
            else{
              ElMessage({
                type: 'success',
                message: '注册成功'
              })
              router.push({name: 'Login'})
            }
          }
        )
      }
    }
    else {
      ElMessage({
        type: 'error',
        message: '请输入有效的信息！！'
      })
    }
  })
}
function goLogin(){
  router.push({name:'Login'})
}
</script>

<style scoped>

</style>